<template>  
	<view>  
		<h1 class="name">{{data.name}}</h1>  
		<view class="flex-container">  
			<view class="container">  
				<p class="title">团队编号</p>  
				<p class="title">运动类型</p>  
				<p class="title">时间</p>  
				<p class="title">地点</p>  
				<p class="title">团长姓名</p>  
				<p class="title">团长联系方式</p>  
				<p class="title">团员人数</p>  
			</view>  
			<view class="container1">  
				<p class="title1">{{data.id}}</p>  
				<p class="title1">{{data.sport}}</p>  
				<p class="title1">{{formatTime(data.start_time)}} - {{formatTime(data.end_time)}}</p>  
				<p class="title1">{{data.location}}</p>  
				<p class="title1">{{data.player}}</p>  
				<p class="title1">{{data.telephone}} &nbsp;&nbsp; <span style="margin-left: 20rpx;">📞</span></p>  
				<p class="title1">{{data.number}}人</p>  
			</view>  
		</view>  
	</view>  
</template>  
  
<script>  
export default {  
	onLoad() {  
		uni.setNavigationBarTitle({  
			title: '团队详情'  
		});  
	},  
	data() {  
		return {  
			data: {  
				name: "羽毛球001团",  
				id: "20020002",  
				sport: "羽毛球",  
				start_time: 12,  
				end_time: 14,  
				location: "东区操场",  
				player: "张国峰",  
				telephone: 17782783928,  
				number: 8  
			}  
		};  
	},  
	methods: {  
		formatTime(time) {  
			const hours = Math.floor(time);  
			const minutes = (time % 1) * 60;  
			const formattedHours = hours.toString().padStart(2, '0');  
			const formattedMinutes = Math.round(minutes).toString().padStart(2, '0');  
			return `${formattedHours}:${formattedMinutes}`;  
		}  
	}  
};  
</script>  
  
<style scoped>  
.flex-container {  
	display: flex;  
	justify-content: space-between;  
	align-items: flex-start;  
}  
  
.container, .container1 {  
	display: flex;  
	flex-direction: column;
	margin-top: 40rpx;
}  
.container1 {  
	margin-right: 160rpx;  
}  
.title,.title1 {  
	margin-left: 60rpx; 
	margin-top: 30rpx; 
}
	
  
.name {  
	margin-top: 60rpx;  
	margin-left: 60rpx;  
}  
  
/* 可能还需要为 `.container1` 中的 `<p>` 元素添加额外的样式以确保对齐 */  
.container1 > p {  
	/* 这里添加额外的样式，如果需要的话 */  
}  
</style>